﻿<template>
    <div class="bg-light">
        <div v-for="(item,index) in mediaList" :key="index" class="van-card bg-white">
            <div class="flex-row">
                <div class="flex-row-fill"></div>
                <div>
                    <van-button v-on:click="moveMedia(0,item,index)" size="small" :disabled="index==0" plain hairline round>上移</van-button>
                    <van-button v-on:click="moveMedia(1,item,index)" size="small" :disabled="index==mediaList.length-1" plain hairline round>下移</van-button>
                    <van-button v-on:click="moveMedia(2,item,index)" size="small" plain hairline round>删除</van-button>
                    <hxt-dropbutton>
                        <van-button size="small" plain hairline round>插入</van-button>
                        <template slot="items">
                            <van-button type="info" size="mini" plain hairline v-on:click="addMedia({type:1,item:item,index:index})">
                                <i class="fa fa-file-text-o"></i>文字
                            </van-button>
                            <van-button type="info" size="mini" plain hairline v-on:click="selectFile({type:2,item:item,index:index})">
                                <i class="fa fa-file-image-o"></i>
                                <span>图片</span>
                            </van-button>
                            <van-button type="info" size="mini" plain hairline v-on:click="selectFile({type:3,item:item,index:index})">
                                <i class="fa fa-file-audio-o"></i>
                                <span>音频</span>
                            </van-button>
                            <van-button type="info" size="mini" plain hairline v-on:click="selectFile({type:4,item:item,index:index})">
                                <i class="fa fa-file-video-o"></i>
                                <span>视频</span>
                            </van-button>
                            <van-button type="info" size="mini" plain hairline v-on:click="selectFile({type:7,item:item,index:index})">
                                <i class="fa fa-file-pdf-o"></i>
                                <span>文件</span>
                            </van-button>
                            <van-button type="info" size="mini" plain hairline v-on:click="addMedia({type:5,item:item,index:index})">
                                <i class="fa fa-link"></i>
                                <span>链接</span>
                            </van-button>
                        </template>
                    </hxt-dropbutton>
                </div>
            </div>
            <template>
                <van-field v-if="item.miType==1" type="textarea" placeholder="请输入内容" v-model="item.miTitle" maxlength="1000" show-word-limit :autosize="{minHeight: 50}" resize="none"></van-field>
                <template v-else-if="item.miType==2">
                    <van-image :src="item.miUrl" style="max-height: 300px; width:100%;" fit="cover" class="hidden radius-5" lazy></van-image>
                </template>
                <template v-else-if="item.miType==3">
                    <audio :src="!!item.rawUrl?item.rawUrl:item.miUrl" v-on:play="playMedia($event)" controls style="margin: 10px 20px 0 10px;">您的浏览器不支持音频播放</audio>
                </template>
                <template v-else-if="item.miType==4">
                    <div class="bg-light" style="position:relative;">
                        <div class="flex-row padding-lr-10 bg-black radius-3" style="position: absolute;">
                            <div class="flex-row-fill size-10 color-white" style="text-align:left;">{{item.miDesc}}</div>
                        </div>
                        <video :src="!!item.rawUrl?item.rawUrl:item.miUrl" v-on:play="playMedia($event)" style="height:auto; max-height:300px;" controls>您的浏览器不支持视频播放</video>
                    </div>
                </template>
                <template v-else-if="item.miType==5">
                    <van-field placeholder="请输入链接描述" v-model="item.miTitle"></van-field>
                    <van-field placeholder="请输入链接" v-model="item.miUrl"></van-field>
                </template>
                <template v-else-if="item.miType==7">
                    <div class="flex-row" style="margin: 10px 20px 0 10px; padding:4px 0;">
                        <div style="padding:0 8px 0 4px;">
                            <i :class="[getFileIco(item.miDesc),'color-999']" style="font-size:2.5em !important;"></i>
                        </div>
                        <div class="flex-row-fill" style="line-height:20px !important;">
                            <div class="color-333">{{item.miTitle}}</div>
                            <div class="color-666">{{item.miSize}}</div>
                        </div>
                    </div>
                </template>
            </template>
        </div>
        <div class="bg-light padding-10">
            <van-button type="info" size="mini" plain hairline v-on:click="addMedia({type:1})">
                <i class="fa fa-file-text-o"></i>
                <span class="size-12">文字</span>
            </van-button>
            <van-button type="info" size="mini" plain hairline v-on:click="selectFile({type:2})">
                <i class="fa fa-file-image-o"></i>
                <span class="size-12">图片</span>
            </van-button>
            <van-button type="info" size="mini" plain hairline v-on:click="selectFile({type:3})">
                <i class="fa fa-file-audio-o"></i>
                <span class="size-12">音频</span>
            </van-button>
            <van-button type="info" size="mini" plain hairline v-on:click="selectFile({type:4})">
                <i class="fa fa-file-video-o"></i>
                <span class="size-12">视频</span>
            </van-button>
            <van-button type="info" size="mini" plain hairline v-on:click="selectFile({type:7})">
                <i class="fa fa-file-pdf-o"></i>
                <span class="size-12">文件</span>
            </van-button>
            <van-button type="info" size="mini" plain hairline v-on:click="addMedia({type:5})">
                <i class="fa fa-link"></i>
                <span class="size-12">链接</span>
            </van-button>
        </div>
        <hxt-fileSelector ref="fileSelector" get-container="body"></hxt-fileSelector>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            props: {
                value: {
                    type: Object,
                    default: {}
                }
            },
            data: function () {
                return {

                };
            },
            computed: {
                mediaList: {
                    get: function () {
                        var v = this.value;
                        if (!hxt.isArray(v)) v = [];
                        return v;
                    },
                    set: function (val) {
                        this.$emit('input', val);
                    }
                }
            },
            methods: {
                moveMedia: function (flag, row, index) {
                    var _this = this, mediaList = _this.mediaList;
                    if (flag == 0) {
                        mediaList.splice(index, 1);
                        mediaList.splice(index - 1, 0, row);
                    }
                    else if (flag == 1) {
                        mediaList.splice(index, 1);
                        mediaList.splice(index + 1, 0, row);
                    }
                    else if (flag == 2) {
                        mediaList.splice(index, 1);
                    }
                },
                addMedia: function (e, values) {
                    var _this = this, mediaList = _this.mediaList, _default = { miId: 0, miType: 0, miTitle: '', miDesc: '', miUrl: '', rawUrl: null, miIndex: 0 }
                        , clone = function (data) { return JSON.parse(JSON.stringify(data)); };
                    e = e || {};
                    var o = null;
                    if (e.type == 1) {
                        o = $.extend(clone(_default), { miType: 1 });
                    }
                    else if (e.type == 5) {
                        o = $.extend(clone(_default), { miType: 5 });
                    }
                    else if (e.type == 2 || e.type == 3 || e.type == 4 || e.type == 7) {
                        o = $.extend(clone(_default), values);
                    }
                    if (!!o) {
                        if (!e.item) mediaList.push(o);
                        else mediaList.splice(e.index, 0, o);
                    }
                },
                playMedia: function (evt) {
                    var el = evt.currentTarget
                        , audios = $('audio')
                        , videos = $('video');
                    $.each(audios, function (idx, item) {
                        if (item !== el) {
                            item.pause();
                        }
                    });
                    $.each(videos, function (idx, item) {
                        if (item !== el) {
                            item.pause();
                        }
                    });
                },
                getFileType: function (type, flag) {
                    if (flag == 1) return hxt.getFileMimeStr(type);
                    else if (flag == 2) return hxt.getFileExtList(type);
                    else return hxt.getFileExtStr(type);
                },
                getFileSize: function (size) {
                    return hxt.getFileSize(size);
                },
                getDuration: function (duration) {
                    return hxt.getDuration(duration);
                },
                getFileIco: function (name) {
                    return hxt.getFileIco(name);
                },
                selectFile: function (opt) {
                    var _this = this;
                    _this.$refs.fileSelector.chooseFile({
                        type: opt.type == 2 ? 'image' : opt.type == 3 ? 'audio' : opt.type == 4 ? 'video' : opt.type == 7 ? 'file' : '',
                        maxWH: 1200,
                        success: function (res) {
                            if (opt.type == 2) {
                                _this.addMedia(opt, { miType: 2, miUrl: res.base64, miTitle: res.sizeStr });
                            } else if (opt.type == 3) {
                                _this.addMedia(opt, { miType: 3, miUrl: res.file, rawUrl: URL.createObjectURL(res.file), miTitle: _this.getDuration(res.duration), miDesc: res.sizeStr });
                            } else if (opt.type == 4) {
                                _this.addMedia(opt, { miType: 4, miUrl: res.file, rawUrl: URL.createObjectURL(res.file), miTitle: _this.getDuration(res.duration), miDesc: res.sizeStr });
                            } else if (opt.type == 7) {
                                _this.addMedia(opt, { miType: 7, miUrl: res.file, miTitle: res.sizeStr, miDesc: res.fullName });
                            }
                        }
                    });
                },

            },
            components: {
                 hxtFileSelector: function () { return hxt.staticComponent(@Html.Raw(this.vueComponent("~/Views/wx/Components/hxt.FileSelector.cshtml"))); }
            }
        };
    })(window.$jscript.fn);
</script>
<style>
</style>